@import 'utils';

/*闪电达极速达的选择*/
.pop-distribution {
  display: none;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  .pop-distribution-cnt {
    position: absolute;
    top: 50%;
    left: 6%;
    margin: rem(-116px) 0 0 0;
    border-radius: rem(5px);
    background-color: #fff;
    width: 88%;
    .pop-distribution-title {
      height: rem(48px);
      line-height: rem(48px);
      text-align: center;
      border-bottom: 1px solid #ededed;
      font-size: rem(17px);
    }
    ul {
      padding: rem(12px) rem(16px);
      border-bottom: 1px solid #ededed;
      li {
        position: relative;
        height: rem(56px);
        padding: rem(8px) 0 rem(8px) rem(32px);
        .distribution-check {
          position: absolute;
          top: rem(20px);
          left: 0;
          width: rem(16px);
          height: rem(16px);
          background: url("../images/icon_check.png") no-repeat center;
          background-size: 100% 100%;
          &.active {
            background: url("../images/icon_check_active.png") no-repeat center;
            background-size: 100% 100%;
          }
        }
        .distribution-text {
          height: rem(20px);
          line-height: rem(20px);
          font-size: rem(16px);
          span {
            font-size: rem(12px);
            color: #ff5d3d;
          }
        }
        .distribution-num {
          height: rem(20px);
          line-height: rem(20px);
          font-size: rem(14px);
          color: #999;
        }
      }
    }
    .distribution-btn {
      border-radius: 0 0 rem(5px) rem(5px);
      a {
        float: left;
        width: 50%;
        height: rem(48px);
        line-height: rem(48px);
        width: 50%;
        text-align: center;
        font-size: rem(16px);
      }
      .distribution-btn-back {

      }
      .distribution-btn-order {
        background-color: #ff5d3d;
        color: #fff;
        border-radius: 0 0 rem(5px) 0;
      }
    }
  }
}

#canyin_choose_lose, #chaoshi_choose_lose {
  a {
    color: #999;
    border-color: #ccc;
    &.active {
      color: #fff;
      background-color: #ccc;
    }
    &.no-select-peisong{
      color: #fff;
      background-color: #ccc;
      border-color:#ccc;
    }
  }
}

#canyin-lose, #chaoshi-lose {
  .decrease:before {
    background-color: #999;
  }
  .increase {
    color: #999;
  }
}

/*收货地址*/
.address-box {
  position: relative;
  background-color: #fff;
  padding: rem(16px) rem(30px) rem(16px) rem(16px);
  margin: 0 auto rem(8px);
  overflow: hidden;
  word-break: break-all;
  &:before {
    content: "";
    position: absolute;
    right: rem(16px);
    top: 50%;
    width: rem(8px);
    height: rem(8px);
    border-left: rem(2px) solid #999;
    border-bottom: rem(2px) solid #999;
    -webkit-transform: translateY(-50%) scaleY(1) rotateZ(-135deg);
    transform: translateY(-50%) scaleY(1) rotateZ(-135deg);
  }
  .name-box {
    line-height: rem(18px);
    span {
      font-size: rem(16px);
    }
    em {
      font-size: rem(16px);
    }
  }
  .detail-address {
    font-size: rem(12px);
    line-height: rem(18px);
  }
  .location-address {
    font-size: rem(14px);
    line-height: rem(18px);
  }
}

.no-delivery {
  opacity: 0.6;
  -webkit-filter: grayscale(1);
  filter: gray;
  filter: grayscale(1);
}

.promotion-noData {
  padding: rem(20px) 0 0;
  text-align: center;
  margin: 0 auto;
  .promotion-noData-img {
    text-align: center;
    width: rem(150px);
    margin: 0 auto;
  }
  .promotion-noData-text {
    padding: rem(20px) 0 0;
    text-align: center;
    font-size: rem(14px);
    ling-height: rem(18px);
    color: #999;
  }
}

.pop-promotion-noData {
  line-height: rem(20px);
  font-size: rem(14px);
  padding: rem(20px);
  color: #999;
  text-align: center;
}

//出错
.code-error-box {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  margin-top: rem(-100px);
  img {
    display: block;
    width: rem(165px);
    height: rem(165px);
    margin: 0 auto;
  }
  .code-error-h {
    padding: rem(25px) rem(16px) 0;
    color: #999;
    font-size: rem(20px);
  }
  .code-error-text1 {
    padding: rem(10px) rem(16px) 0;
    color: #999;
    font-size: rem(15px);
  }
}

//促销页面
.background100 {
  -webkit-background-size: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}

img {
  object-fit: cover;
}

//促销头部搜索
.search-outer {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: rem(8px) rem(16px) rem(8px) rem(16px);
  background: $bgWhite;
  .back {
    height: rem(20px);
    margin: rem(4px) 0;
    .icon-back {

    }
  }
  &.hasback {
    #search_form {
      margin-left: rem(22px);
    }
  }
  &.shop-search-head {
    #search_form {
      padding: 0 rem(24px) 0 rem(28px);
      .btn-search {
        left: 0;
      }
    }
  }
  .search-cart {
    position: absolute;
    top: rem(8px);
    right: rem(16px);
    background: url("../images/icon_cart.png") no-repeat right top;
    width: rem(32px);
    height: rem(28px);
    background-size: auto 100%;
    &.active {
      background: url("../images/icon_cart_active.png") no-repeat right top;
      background-size: auto 100%;
    }
    button {
      position: absolute;
      top: 0;
      display: inline-block;
      right: rem(-4px);
      padding: rem(1px) rem(3px);
      border-radius: rem(6px);
      height: rem(12px);
      line-height: rem(12px);
      font-size: rem(10px);
      background-color: #ff5c33;
      color: #ff0;
    }
  }
  .search-cacel {
    position: absolute;
    top: rem(8px);
    right: rem(16px);
    width: rem(32px);
    height: rem(28px);
    line-height: rem(28px);
    color: #777;
    text-align: right;
  }
  #search_form {
    position: relative;
    padding: 0 rem(24px) 0 rem(114px);
    -webkit-border-radius: rem(28px);
    border-radius: rem(28px);
    background: #f5f5f5;
    .search-type {
      position: absolute;
      top: 0;
      left: rem(12px);
      width: rem(66px);
      height: rem(28px);
      line-height: rem(28px);
      .search-line {
        position: absolute;
        top: rem(4px);
        right: rem(-8px);
        width: 0;
        height: rem(20px);
      }
      .search-ico-close {
        position: absolute;
        top: 0;
        right: 0;
        width: rem(6px);
        height: rem(28px);
        background: url("../images/icon_search-close.png") no-repeat center;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
      }
      .search-type-text {
        font-size: rem(12px);
      }
      ul {
        display: none;
        z-index: 3;
        position: absolute;
        top: rem(32px);
        left: rem(-12px);
        background-color: #fff;
        width: rem(84px);
        border-radius: rem(5px);
        li {
          position: relative;
          padding: 0 0 0 rem(12px);
          height: rem(40px);
          line-height: rem(40px);
          font-size: rem(13px);
          color: #777;
        }
        li.active {
          color: #464646;
          &:after {
            position: absolute;
            right: rem(8px);
            top: rem(18px);
            content: '';
            width: rem(4px);
            height: rem(4px);
            background: #ff5d3d;
            -webkit-border-radius: 50%;
            border-radius: 50%;
          }
        }
      }
      &.on {
        .search-ico-close {
          transform: rotate(180deg);
        }
        ul {
          display: block;
        }

      }
    }
    .btn-search {
      position: absolute;
      left: rem(86px);
      top: 0;
      width: rem(28px);
      height: rem(28px);
      background: url("../images/icon_search1.png") no-repeat center;
      -webkit-background-size: rem(15px) rem(15px);
      background-size: rem(15px) rem(15px);
      &.active {
        background: url("../images/icon_search_active.png") no-repeat center;
        -webkit-background-size: rem(15px) rem(15px);
        background-size: rem(15px) rem(15px);
      }
    }
    .search-result-num {
      position: absolute;
      top: 0;
      right: rem(30px);
      display: inline-block;
      height: rem(28px);
      line-height: rem(28px);
      text-align: right;
      font-size: rem(12px);
      color: #999;
    }
    input {
      width: 100%;
      height: rem(28px);
      text-align: left;
      font-size: rem(12px);
      background-color: transparent;
    }
    i {
      position: absolute;
      right: rem(8px);
      top: 50%;
      display: block;
      width: rem(14px);
      height: rem(14px);
      margin-top: rem(-7px);
      @extend .background100;
      background-image: url("../images/del.png");
      visibility: hidden;
      &.visible {
        visibility: visible;
      }
    }
  }
}

/*促销*/
.goods-list {
  li {
    position: relative;
  }
  .icon-add {
    position: absolute;
    right: rem(18px);
    bottom: rem(12px);
  }
}

#promotion-head {
  padding: rem(10px) rem(16px) rem(2px);
  line-height: rem(18px);
  font-size: rem(14px);
  background-color: #fff;
  span {
    font-size: rem(14px);
  }
  em {
    font-size: rem(14px);
    color: #999;
  }
}

#promotion-box {
  padding: rem(45px) 0 rem(50px);
  background-color: #fff;
}

.promotion-foot {
  z-index: 9;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 rem(110px) 0 rem(16px);
  height: rem(44px);
  background-color: #fff;
  &.promotion-foot-long {
    padding: 0 rem(200px) 0 rem(16px);
  }
  .promotion-cart {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    height: rem(44px);
    line-height: rem(44px);
    width: rem(100px);
    background-color: #ff5d3d;
    color: #fff;
    text-align: center;
    font-size: rem(15px);
  }
  .view-exchange {
    position: absolute;
    right: rem(100px);
    bottom: 0;
    display: block;
    height: rem(44px);
    line-height: rem(44px);
    width: rem(100px);
    background-color: #ffa700;
    color: #fff;
    text-align: center;
    font-size: rem(15px);
  }
  .promotion-foot-total {
    .promotion-price {
      padding: rem(8px) 0 0 rem(44px);
      line-height: rem(16px);
      height: rem(24px);
      position: relative;
      span {
        position: absolute;
        left: 0;
        top: rem(8px);
        display: block;
        line-height: rem(16px);
        font-size: rem(12px);
      }
      em {
        position: relative;
        display: block;
        color: #ff6b00;
        font-size: rem(14px);
        &:before {
          content: "￥";
          position: absolute;
          left: rem(-10px);
          bottom: rem(2px);
          line-height: rem(12px);
          font-size: rem(12px);
          color: #ff6b00;
        }
      }
    }
    .promotion-meet {
      font-size: rem(10px);
      color: #999;
      line-height: rem(10px);
    }
  }
}

#pop-promotion {
  display: none;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  .pop-promotion-cnt {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80%;
    overflow-y: auto;
    background-color: #fff;
    padding: 0 0 rem(45px);
    .pop-promotion-head {
      position: relative;
      height: 48px;
      line-height: 48px;
      text-align: center;
      font-size: rem(14px);
      #close-promotion {
        position: absolute;
        top: rem(9px);
        right: rem(10px);
        width: rem(24px);
        height: rem(30px);
        background: url("../images/cart_close.png") no-repeat center;
        background-size: rem(12px) auto;

      }
    }
    .pop-promotion-ul {
      overflow-y: auto;
      .pop-promotion-li {
        position: relative;
        padding: rem(12px) rem(16px) rem(12px) rem(112px);
        min-height: rem(90px);
        .promotion-select {
          position: absolute;
          top: rem(37px);
          left: rem(16px);
          width: rem(16px);
          height: rem(16px);
          background: url("../images/icon_check.png") no-repeat center;
          background-size: 100%;
          &.checked {
            background: url("../images/icon_check_active.png") no-repeat center;
            background-size: 100%;
          }
          &.no-check {
            background: url("../images/icon_check_no.png") no-repeat center;
            background-size: 100%;
          }
        }
        .images {
          position: absolute;
          top: rem(12px);
          left: rem(38px);
          border: 1px solid #ccc;
          border-width: rem(0.5px) !important;
          img {
            width: rem(63px);
            height: rem(63px);
          }
        }
        .title {
          font-size: rem(13px);
          line-height: rem(14px);
          color: #4e4e4e;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          max-height: rem(28px);
          overflow: hidden;

        }
        .spec {
          padding: rem(3px) 0;
          line-height: rem(14px);
          font-size: rem(12px);
          color: #999;
        }
        .price {
          position: absolute;
          bottom: rem(12px);
          left: rem(122px);
          line-height: rem(18px);
          font-size: rem(15px);
          color: #ff6b00;
          &:before {
            content: "￥";
            position: absolute;
            left: rem(-10px);
            bottom: rem(4px);
            line-height: rem(12px);
            font-size: rem(12px);
            color: #ff6b00;
          }
          span {
            font-size: rem(12px);
          }
        }
        .num {
          position: absolute;
          right: rem(16px);
          bottom: rem(12px);
          font-size: rem(12px);
          line-height: rem(18px);
        }
      }
    }
    .pop-promotion-foot {
      background-color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      .pop-promotion-finish {
        padding: 0 0 0 rem(16px);
        border-top: 1px solid #ededed;
        border-width: rem(0.5px) !important;
        height: rem(45px);
        line-height: rem(44px);
        font-size: rem(14px);
      }
      .pop-promotion-confirm {
        position: absolute;
        bottom: 0;
        right: 0;
        width: rem(104px);
        line-height: rem(44px);
        background-color: #ff5d3d;
        color: #fff;
        text-align: center;
        font-size: rem(16px);

      }
    }
  }
}

//购物车删除弹窗
#cart-del-pop {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: rem(270px);
    margin-top: rem(-60px);
    margin-left: rem(-135px);
    border-radius: rem(10px);
    background-color: rgba(255, 255, 255, 1);
    p {
      height: rem(56px);
      line-height: rem(56px);
      text-align: center;
      font-size: rem(16px);
      border-bottom: 1px solid #e6e6e6;
      border-width: 0.5px;
    }
    .pop-cart-btn {
      display: flex;
      div {
        flex: 1;
        text-align: center;
        height: rem(48px);
        line-height: rem(48px);
        font-size: rem(16px);
      }
      #confirm-del-btn {
        color: #349bf0;
        border-left: 1px solid #e6e6e6;
        border-width: 0.5px;
      }
    }
  }
}

//修改优惠方式弹窗
#cart-select-proId {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.7);
  .select-proId-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80%;
    overflow-y: auto;
    background-color: #fff;
    .proId-title {
      height: rem(48px);
      line-height: rem(48px);
      font-size: rem(15px);
      text-align: center;
      .proId-close {
        position: absolute;
        right: rem(12px);
        top: rem(9px);
        height: rem(30px);
        width: rem(20px);
        background: url("../images/cart_close.png") no-repeat center;
        -webkit-background-size: rem(10px);
        background-size: rem(10px);
      }
    }
    ul {
      li {
        position: relative;
        line-height: rem(16px);
        min-height: rem(54px);
        padding: rem(18px) rem(16px) rem(18px) rem(40px);
        font-size: rem(14px);
        .proId-btn {
          position: absolute;
          top: rem(18px);
          left: rem(16px);
          width: rem(16px);
          height: rem(16px);
          background: url("../images/icon_check.png") no-repeat;
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
        }
        .proId-text {

        }
        &.checked {
          .proId-btn {
            background: url("../images/icon_check_active.png") no-repeat;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
          }
          .proId-text {
            color: #fc5e45;
          }
        }
      }
    }
  }
}

//失效的商品
#loseBuy-box {
  .loseBuy-title {
    line-height: rem(18px);
    text-align: center;
    padding: rem(14px) rem(16px);
    font-size: rem(14px);
  }
  #loseBuy-list {
    .check-wrapper {

    }
    img {
      opacity: 0.5;
    }
    h3 {
      color: #ccc;
    }
    h4 {
      color: #ccc;
    }
    p {
      color: #ccc;
    }
    .similar-btn {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      height: rem(24px);
      line-height: rem(24px);
      box-sizing: content-box;
      padding: 0 rem(15px);
      color: #ff5d3d;
      font-size: rem(12px);
      border: 1px solid #ff5d3d;
      border-width: 0.5px !important;
      border-radius: rem(12px);

    }
  }
  .clear-loseBuy {
    padding: rem(15px) 0;
    text-align: center;
    #clear-loseBuy {
      margin: 0 auto;
      display: inline-block;
      width: rem(150px);
      text-align: center;
      height: rem(24px);
      line-height: rem(24px);
      border: 1px solid #ff5d3d;
      border-width: 0.5px;
      font-size: rem(12px);
      color: #ff5d3d;
      border-radius: rem(13px);
      box-sizing: content-box;
    }
  }
}

.pb95 {
  padding-bottom: rem(95px) !important;
}

.shop-promotion {
  position: relative;
  height: rem(40px);
  padding: rem(13px) rem(62px) rem(13px) rem(16px);
  span {
    display: block;
    height: rem(14px);
    padding-left: rem(21px);
    line-height: rem(14px);
    font-size: rem(12px);
    background: url('../images/icon_laba.png') no-repeat left center;
    -webkit-background-size: rem(15px) rem(14px);
    background-size: rem(15px) rem(14px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  a {
    position: absolute;
    top: rem(10px);
    right: 0;
    height: rem(20px);
    padding: 0 rem(16px);
    line-height: rem(20px);
    border-left: rem(1px) solid #e6e6e6;
    color: #777;
    text-align: center;
  }
}

.my-address {
  padding: rem(22px) rem(16px) rem(24px);
  background: url('../images/bg_caitiao.png') no-repeat center bottom;
  -webkit-background-size: 100% rem(2px);
  background-size: 100% rem(2px);
  .address-wrapper {
    position: relative;
    display: block;
    padding-right: rem(22px);
    h3 {
      width: 100%;
      height: rem(16px);
      line-height: rem(16px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    p {
      width: 100%;
      height: rem(12px);
      margin-top: rem(12px);
      line-height: rem(12px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &:after {
      @extend .forword;
    }
  }
}

.bg-caitiao {
  width: 100%;
  height: rem(2px);
  background: #fcfcfc url('../images/bg_caitiao.png') no-repeat center top;
  -webkit-background-size: 100% rem(2px);
  background-size: 100% rem(2px);
}

.forword {
  position: absolute;
  right: rem(2px);
  top: 50%;
  width: rem(8px);
  height: rem(8px);
  content: "";
  border-left: rem(2px) solid #999;
  border-bottom: rem(2px) solid #999;
  -webkit-transform: translateY(-50%) scaleY(1) rotateZ(-135deg);
  transform: translateY(-50%) scaleY(1) rotateZ(-135deg);
}

.shop-group {
  .nav {
    height: rem(65px);
    padding: rem(20px) 0;
    margin: 0 rem(16px);
    h2 {
      float: left;
      line-height: rem(25px);
      font-size: rem(15px);
      color: #999;
    }
    .switch-toggle {
      float: right;
      height: rem(25px);
      .wrap {
        position: relative;
        right: 0;
        top: 0;
        height: rem(25px);
        -webkit-border-radius: rem(25px);
        border-radius: rem(25px);
        background: $bgWhite;
        font-size: 0;
      }
      .wrap a {
        display: inline-block;
        width: rem(40px);
        height: rem(25px);
        margin: 0 0 0 rem(4px);
        line-height: rem(23px);
        font-size: rem(12px);
        -webkit-border-radius: rem(23px);
        border-radius: rem(23px);
        border: rem(1px) solid #ccc;
        -webkit-transition: all linear .2s;
        transition: all 0.2s linear 0s;
        text-align: center;
      }
      .wrap a.active {
        width: rem(40px);
        height: rem(25px);
        line-height: rem(23px);
        background: $chiefColor;
        border: rem(1px) solid #ff5d3d;
        color: #fff;
      }
      .wrap a.no-select-peisong{
        color: #fff;
        background-color: #ccc;
      }
    }
  }
}

.check-wrapper {
  position: absolute;
  display: block;
  width: rem(27px);
  height: rem(27px);
  padding: rem(6px);
  font-size: 0;
  span {
    display: inline-block;
    width: rem(15px);
    height: rem(15px);
    background: url('../images/icon_check.png') no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    &.checked {
      background: url('../images/icon_check_active.png') no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
    }
    &.noCan-icon {
      background: url('../images/icon_check_no.png') no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
    }
    &.lose-icon.checked {
      background: url('../images/icon_check_lose.png') no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
    }
    text-indent: -999999px;
  }
}

.shop-group-item {
  .store-title {
    .wrap {
      position: relative;
      height: rem(45px);
      line-height: rem(45px);
      padding: 0 rem(16px) 0 rem(37px);
    }
    .check-wrapper {
      left: rem(10px);
      top: rem(8px);
    }
    .title {
      position: relative;
      display: block;
      padding-right: rem(12px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      img {
        width: rem(25px);
        height: rem(25px);
        margin: rem(-4px) rem(6px) 0 0;
        -webkit-border-radius: rem(4px);
        border-radius: rem(4px);
        vertical-align: middle;
      }
      span {
        font-size: rem(14px);
      }
      &:after {
        @extend .forword;
      }
    }
  }
  .shop-cart-list {
    .li {
      .no-Distribution {
        position: absolute;
        right: 0;
        bottom: 0;
        color: #ffa700;
        font-size: rem(12px);
        text-align: right;
      }

      &:last-child {
        border-bottom: none;
      }
      padding: rem(20px) 0 0;
      .wrap {
        position: relative;
        height: rem(85px);
        padding: 0 rem(16px) rem(20px) rem(37px);
      }
      .check-wrapper {
        left: rem(10px);
        top: rem(19px);
      }
      .cart-item {
        .item-flag {
          position: absolute;
          top: 0;
          left: rem(8px);
          z-index: 9;
          img {
            width: rem(24px);
          }
        }
        .item-img {
          float: left;
          width: rem(65px);
          height: rem(65px);
          border: rem(1px) solid #ccc;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .item-info {
          position: relative;
          top: rem(-2px);
          height: rem(67px);
          margin-left: rem(75px);
          word-break: break-all;
          h3 {
            display: -webkit-box;
            max-height: rem(30px);
            font-size: rem(13px);
            line-height: rem(15px);
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            img{
              vertical-align: middle;
              height:rem(13px);
              width:auto;
            }
          }
          h4 {
            height: rem(12px);
            margin-top: rem(4px);
            font-size: rem(12px);
            color: #999;
            line-height: rem(12px);
          }
          .price {
            position: absolute;
            bottom: 0;
            left: 0;
            height: rem(14px);
            color: $chiefColor;
            font-size: 0;
            em, s {
              display: inline-block;
            }
            em {
              line-height: rem(15px);
              font-size: rem(15px);
              &:before {
                content: '￥';
                font-size: rem(12px);
                margin-right: 0;
                line-height: 1;
              }
            }
            s {
              line-height: rem(12px);
              font-size: rem(12px);
            }
          }
        }
        .item-quantity {
          position: absolute;
          right: 0;
          bottom: 0;
          width: rem(82px);
          height: rem(25px);
          -webkit-border-radius: rem(11px);
          border-radius: rem(11px);
          overflow: hidden;
          font-size: 0;
          .decrease, .quantity, .increase {
            display: inline-block;
            font-size: rem(14px);
            line-height: rem(23px);
            font-family: Helvetica;
            text-align: center;

          }
          .decrease, .increase {
            width: rem(25px);
            font-size: rem(18px);
            color: $chiefColor;
          }
          .off {
            color: #999 !important;
          }
          .decrease {
            &.off {
              color: #fff !important;
              &:before {
                background-color: #999;
              }
            }
            position: relative;
            corlor: #fff;
            &:before {
              position: absolute;
              top: 50%;
              left: 50%;
              content: "";
              -webkit-transform: scale(2, 1);
              transform: scale(2, 1);
              width: rem(4px);
              background-color: #ff5d3d;
              height: rem(2px);
              margin-top: rem(-1px);
              margin-left: rem(-2px);
              display: block;
            }
          }
          .quantity {
            width: rem(30px);
            background: $bgWhite;
            color: $bodyFontColor !important;
          }
          input[disabled] {
            -webkit-text-fill-color: $bodyFontColor;
            -webkit-opacity: 1;
            opacity: 1;
          }
          .increase {
            color: $chiefColor;
          }
        }
      }
      &.gift-pro {
        .cart-item {
          .item-info {
            h3 {
              span {
                display: inline-block;
                line-height: rem(15px);
                height: rem(15px);
                padding: 0 rem(5px);
                border-radius: rem(8px);
                color: #fff;
                background-color: #ffa700;
                margin: 0 rem(5px) 0 0;
              }
            }
            .price {
              em {
                font-size: rem(15px);
                s{
                  font-size: rem(12px);
                  color:#999;
                  text-decoration:line-through;
                }
              }
            }
          }
        }
        .gift-num {
          text-align: right;
          line-height: rem(15px);
          font-size: rem(15px);
          color: #464646;
          &:before {
            content: '×';
            font-size: rem(12px);
            margin-right: 0;
            line-height: 1;
          }
        }

      }
    }

  }
  .edit-promotion {
    position: relative;
    height: rem(35px);
    padding: 0 rem(64px) 0 rem(38px);
    background: #fffbf3;
    .pro-title {
      text-overflow: ellipsis;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      i, span {
        line-height: rem(35px);
        font-size: rem(12px);
      }
      i {
        color: #999;
        margin-right: rem(5px);
      }
      span {
        color: #ccc;
        text-overflow: ellipsis;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .pro-link {
      a {
        display: block;
        line-height: rem(35px);
        font-size: rem(12px);
        color: #999;
        position: absolute;
        right: rem(16px);
        top: 0;
      }
    }
  }
}

.shop-cart-list .cart-promotion:first-child {
  border-top: none !important;
}

.cart-promotion.overShort {
  padding: rem(15px) rem(64px) rem(6px) rem(16px);
}

.cart-promotion {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  min-height: rem(35px);
  padding: rem(15px) rem(16px) rem(6px) rem(16px);
  .pro-title {
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    min-height: rem(15px);
    line-height: rem(15px);
    i, span {
      text-overflow: ellipsis;
      vertical-align: middle;
    }
    i {
      display: inline-block;
      padding: 0 rem(4px) 0;
      color: #ffa700;
      border: rem(1px) solid #ffa700;
      font-size: rem(12px);
      line-height: rem(12px);
      overflow: hidden;
      -webkit-border-radius: rem(6px);
      border-radius: rem(6px);
      box-sizing: content-box;
      text-align: center;
    }
    span {
      height: rem(14px);
      line-height: rem(14px);
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: rem(8px);
      color: #999;
      font-size: rem(12px);
      box-sizing: content-box;
    }
  }
  .pro-link {
    position: absolute;
    right: rem(16px);
    top: rem(16px);
    height: rem(15px);
    line-height: rem(15px);
    a {
      height: rem(15px);
      line-height: rem(15px);
      position: relative;
      display: block;
      font-size: rem(12px);
      color: #ffa601;
      padding-right: rem(12px);
      &:after {
        position: absolute;
        right: 0;
        top: 50%;
        width: rem(8px);
        height: rem(8px);
        content: "";
        border-left: rem(2px) solid #ffa601;
        border-bottom: rem(2px) solid #ffa601;
        -webkit-transform: translateY(-50%) scaleY(1) rotateZ(-135deg);
        transform: translateY(-50%) scaleY(1) rotateZ(-135deg);
      }
    }
  }
}

.down-tips {
  height: rem(20px);
  text-align: center;
  background: #ececec;
  span {
    font-size: rem(12px);
    color: #ccc;
  }
}

.cart-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: rem(50px);
  width: 100%;
  z-index: 99;
  height: rem(45px);
  padding-left: rem(16px);
  .wrap {
    position: relative;
    .check-price {
      float: left;
      width: 72%;
      height: 100%;
      line-height: rem(45px);
      .all-check-wrapper {
        float: left;
        height: 100%;
        .all-check {
          display: inline-block;
          padding-left: rem(22px);
          background: url('../images/icon_check.png') no-repeat left center;
          -webkit-background-size: rem(15px) rem(15px);
          background-size: rem(15px) rem(15px);
          color: #4e4e4e;
          font-size: rem(14px);
          vertical-align: middle;
        }
        .checked {
          background: url('../images/icon_check_active.png') no-repeat left center;
          -webkit-background-size: rem(15px) rem(15px);
          background-size: rem(15px) rem(15px);
        }
      }
      .total-price-wrapper {
        float: right;
        height: 100%;
        margin-right: rem(10px);
        span, b {
          display: block;
          text-align: right;
        }
        .total-price {
          margin-top: rem(4px);
          line-height: rem(20px);
          i, em, s {

          }
          em, s {
            color: $chiefColor;
          }
          i {
            font-size: rem(12px);
            line-height: 1;
          }
          em {
            font-size: rem(19px);
            &:before {
              content: '￥';
              font-size: rem(12px);
              margin-right: 0;
              line-height: 1;
            }
          }
          s {
            font-size: rem(14px);
            line-height: 1;
          }
        }
        &.one-line .total-price{
          line-height:rem(45px);
          margin-top: 0;
          vertical-align: middle;
        }
        .promotion-msg {
          margin-top: 0;
          line-height: rem(12px);
          font-size: rem(10px);
          color: #999;
          font-weight: 400;
        }
      }
    }
    .settle-accounts {
      float: left;
      display: block;
      width: 28%;
      height: 100%;
      line-height: rem(45px);
      text-align: center;
      background: $chiefColor;
      font-size: rem(16px);
      color: #fff;
      &.noCan-accounts {
        background-color: #bcbcbc !important;
      }
    }
  }
}

/*empty  start*/
.cart-empty {
  aside {
    display: block;
    width: 44%;
    margin: rem(105px) auto rem(20px);
  }
  p {
    color: #999;
    line-height: rem(14px);
    font-size: rem(14px);
    text-align: center;
  }
  a {
    display: block;
    width: 86%;
    height: rem(48px);
    margin: rem(50px) auto 0;
    line-height: rem(48px);
    text-align: center;
    font-size: rem(19px);
    color: #fff;
    background: $chiefColor;
    -webkit-border-radius: rem(24px);
    border-radius: rem(24px);
  }
}

/*empty  end*/

.cart-popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.5);
  .wrapper {
    position: fixed;
    left: 6%;
    right: 6%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background: #fff;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    z-index: 4;
    overflow: hidden;
    h2 {
      height: rem(48px);
      font-size: rem(17px);
      text-align: center;
      line-height: rem(48px);
    }
    .settle-goods {
      padding: 0 rem(16px);
      border-top: rem(1px) solid #ededed;
      border-bottom: rem(1px) solid #ededed;
      li {
        position: relative;
        height: rem(64px);
        background: url('../images/icon_check.png') no-repeat left center;
        -webkit-background-size: rem(15px) rem(15px);
        background-size: rem(15px) rem(15px);
        &.active {
          background: url('../images/icon_check_active.png') no-repeat left center;
          -webkit-background-size: rem(15px) rem(15px);
          background-size: rem(15px) rem(15px);
        }
        h3 {
          position: absolute;
          top: rem(15px);
          left: rem(31px);
          font-size: rem(16px);
          line-height: rem(16px);
          i {
            color: #ff6b1f;
            font-size: rem(13px);
            line-height: rem(13px);
          }
        }
        p {
          position: absolute;
          bottom: rem(15px);
          left: rem(31px);
          font-size: rem(13px);
          line-height: rem(13px);
          color: #999;
        }
      }
    }
    .button-area {
      height: rem(48px);
      font-size: 0;
      overflow: hidden;
      span {
        display: inline-block;
        width: 50%;
        line-height: rem(48px);
        font-size: rem(17px);
        text-align: center;
        &.active {
          background: $chiefColor;
          color: #fff;
        }
      }
    }
  }
}

@media only screen and (max-device-width: 320px) {
  .cart-empty {
    i {
      width: 244/750*100%;
      margin: rem(60px) auto rem(28px);
    }
  }
}